<!-- <script setup>
import {ref,onMounted} from 'vue';
import http from '@/utils/http';
import { useRoute } from 'vue-router';

const route = useRoute();
let id= route.params.id;
const articles = ref(null); 

const getArticle = async () => {
    const response = await http.get('/article/getArticleById',{
        params:{id: id}
    },)
    articles.value = response.data;
}

onMounted(() => {
    console.log('请求信息');
    getArticle();
})
</script>

<template>
<div>
    <h1>相似文章</h1>
    <div v-if="articles">
        <h2>>{{ articles.title}}</h2>
        <p>发布日期：{{ articles.date }}</p>
        <p>摘要：{{ articles.summary }}</p>
        <p>{{ articles.content }}</p>
    </div>
</div>
</template>

<style scoped>
</style> -->
<script setup>
import {ref,onMounted} from 'vue';
import http from '@/utils/http.js'
const list = ref([]);

const getArticleList = async () => {
    const response = await http.get('/article/list');
    list.value = response.data;
}

onMounted(() => {
    console.log('请求信息');
    getArticleList();
})
</script>

<template>
<el-container style="width: 80%; margin: 0 auto">
    <el-main>
      <el-row>
        <el-col>
            <el-card v-for="articles in list.slice(0,1)" :key="articles.id">
                <h1>{{ articles.title}}</h1>
                <p>发布日期：{{ articles.date }}</p>
                <p>摘要：{{ articles.summary }}</p>
                <p>{{ articles.content }}</p>
            </el-card>
        </el-col>
      </el-row>
    </el-main>

    <el-aside>
        <el-card style="margin-top: 20px;">
           <h1>相似文章</h1>
        </el-card>
    </el-aside>
</el-container>
</template>

<style scoped>
</style>